<template>
	<el-container>
		<el-header style="height: auto;">
			<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
		</el-header>
		<el-main class="nopadding">
			<el-table ref="table" :data="paginatedData">
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column label="申请人" prop="userName" width="150"></el-table-column>
				<el-table-column label="申请人部门" prop="userDeptName" width="150"></el-table-column>
				<el-table-column label="审批人" prop="approverUserName" width="150"></el-table-column>
				<el-table-column label="审批人部门" prop="approverDeptName" width="150"></el-table-column>
				<el-table-column label="外出开始时间" prop="outTime" width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="外出结束时间" prop="endTime" width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="外出地点" prop="outAddress" width="200" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="外出事由" prop="reason" width="300" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="申请状态" prop="typeStatus" width="150">
					<template #default="scope">
						{{ scope.row.typeStatus === undefined ? '--' : scope.row.typeStatus == '0' ? '审核中' : scope.row.typeStatus == '1' ? '通过' : '不通过' }}
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="search.page"
				:page-size="search.pageSize"
				layout="total, prev, pager, next"
				:total="total">
			</el-pagination>
		</el-main>
	</el-container>
</template>

<script>
import scSelectFilter from '@/components/scSelectFilter'
export default {
	name: 'My Attend Record',
	components: {
		scSelectFilter,
	},
	data() {
		return {
			dialog: {
				save: false,
				detailsSave: false
			},
			filterData: [
				{
					title: "日期范围",
					key: "date",
					multiple: false,
					options: [
						{
							label: "全部",
							value: ""
						},
						{
							label: "今日",
							value: "1"
						},
						{
							label: "昨日",
							value: "2"
						},
						{
							label: "一周内",
							value: "3"
						},
						{
							label: "一月内",
							value: "4"
						},
						{
							label: "一月前",
							value: "5"
						}
					]
				}
			],
			apiObj: undefined,
			search: {
				date: '',
				id: '',
				page: 1,
				pageSize: 10
			},
			total: 0 // 总记录数
		}
	},
	mounted() {
		console.log("apiObj", this.apiObj)
		let userInfo = this.$TOOL.data.get("USER_INFO");
		console.log("111111111111111111111111", userInfo);
		if (userInfo && userInfo.id) {
			this.search.id = userInfo.id;
			this.fetchData();
		} else {
			console.error("USER_INFO is undefined or invalid");
		}
	},
	computed: {
		paginatedData() {
			const start = (this.search.page - 1) * this.search.pageSize;
			const end = start + this.search.pageSize;
			return this.apiObj ? this.apiObj.slice(start, end) : [];
		}
	},
	methods: {
		filterChange(data) {
			this.search.date = data.date;
			this.fetchData();
		},
		fetchData() {
			this.$API.office.attend.getTheApplicantSOutOfOfficeAttendanceList.get({
				status:'6',
				option1: this.search.id,
				date: this.search.date,
				page: this.search.page,
				pageSize: this.search.pageSize
			}).then(res => {
				console.log('res:', res);
				// 确保 res.data.list 是一个数组
				if (Array.isArray(res.data.list)) {
					this.apiObj = res.data.list;
					this.total = res.data.total; // 假设接口返回的总记录数字段为 total
				} else {
					console.error("res.data.list is not an array", res.data.list);
					this.apiObj = [];
					this.total = 0;
				}
				console.log('this.apiObj:', this.apiObj);
			}).catch(err => {
				console.error("接口调用失败", err);
			});
		},
		handleSizeChange(newSize) {
			this.search.pageSize = newSize;
			this.fetchData();
		},
		handleCurrentChange(newPage) {
			this.search.page = newPage;
			this.fetchData();
		},
		readBpmDetails(row, index) {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/bpm/handle/read',
					query: {
						runId: row.runId
					}
				});
			});
		}
	}
}
</script>

<style>
</style>
